<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户名检查测试</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <h1>用户名检查测试</h1>
    <div>
        <label for="username">用户名:</label>
        <input type="text" id="username" placeholder="请输入用户名">
        <button onclick="checkUsername()">检查用户名</button>
    </div>
    <div id="result" style="margin-top: 20px; padding: 10px; border: 1px solid #ccc;"></div>

    <script>
        // 配置axios
        axios.defaults.baseURL = 'http://localhost:8085';
        axios.defaults.timeout = 5000;

        async function checkUsername() {
            const username = document.getElementById('username').value;
            const resultDiv = document.getElementById('result');
            
            if (!username) {
                resultDiv.innerHTML = '<span style="color: red;">请输入用户名</span>';
                return;
            }

            try {
                console.log('发送请求:', `/member/check-user-no?userNo=${username}`);
                const response = await axios.get(`/member/check-user-no?userNo=${username}`);
                console.log('响应数据:', response.data);
                
                if (response.data.exists) {
                    resultDiv.innerHTML = `<span style="color: red;">用户名 "${username}" 已存在</span>`;
                } else {
                    resultDiv.innerHTML = `<span style="color: green;">用户名 "${username}" 可以使用</span>`;
                }
            } catch (error) {
                console.error('检查用户名失败:', error);
                resultDiv.innerHTML = `<span style="color: red;">检查失败: ${error.message}</span>`;
            }
        }

        // 回车键检查
        document.getElementById('username').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                checkUsername();
            }
        });
    </script>
</body>
</html>